<%--
  Created by IntelliJ IDEA.
  User: 李元峰
  Date: 2022/11/7
  Time: 11:14
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<c:set value="${pageContext.request.contextPath}" var="path"></c:set>
<!doctype html>
<html lang="en" class="pxp-root">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link rel="shortcut icon" href="/static/web/images/favicon.png" type="image/x-icon">
    <link rel="preconnect" href="https://fonts.googleapis.com/">
    <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;500;600;700&display=swap" rel="stylesheet">
    <link href="/static/web/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="/static/web/css/font-awesome.min.css">
    <link rel="stylesheet" href="/static/web/css/owl.carousel.min.css">
    <link rel="stylesheet" href="/static/web/css/owl.theme.default.min.css">
    <link rel="stylesheet" href="/static/web/css/animate.css">
    <link rel="stylesheet" href="/static/web/css/style.css">
    <script type="text/javascript" src="/static/web/js/jquery-3.3.1.min.js"></script>

    <title>万码招聘 - 注册</title>
</head>
<body>

<div class="pxp-preloader"><span>Loading...</span></div>

<!--Head-->
<jsp:include page="/web/personal/inc/personalSignUpHead"/>

<!--js代码-->

<script type="text/javascript">

</script>

<section class="pxp-hero vh-100" style="background-color: var(--pxpMainColorLight);">
    <div class="row align-items-center pxp-sign-hero-container">
        <div class="col-xl-6 pxp-column">
            <div class="pxp-sign-hero-fig text-center pb-100 pt-100">
                <img src="/static/web/images/signup-big-fig.png" alt="Sign up">
                <h1 class="mt-4 mt-lg-5">创建账号</h1>
            </div>
        </div>
        <div class="col-xl-6 pxp-column pxp-is-light">
            <div class="pxp-sign-hero-form pb-100 pt-100">
                <div class="row justify-content-center">
                    <div class="col-lg-6 col-xl-7 col-xxl-5">
                        <div class="pxp-sign-hero-form-content">
                            <h5 class="text-center">输入一条工作意向</h5>
                            <form id="myform" method="post" action="/web/signUpExpInfo" class="mt-4">
                                <input type="hidden" name="userId" value="${requestScope.id}"/>
                                <div style="margin-top: -20px;">
                                    <!--错误提示-->
                                    <span style="margin-left: 20px;font-size: 10px;font-weight:bold;color: red;" id="positionType_msg"></span>
                                    <div class="form-floating mb-3">
                                        <select name="positionTypeId" class="form-select" id="positionType">
                                            <option selected disabled hidden>请选择</option>
                                            <c:forEach items="${requestScope.positionTypes}" var="positionType">
                                                <option value="${positionType.id}">${positionType.typeName}</option>
                                            </c:forEach>
                                        </select>
                                        <label for="positionType" style="font-weight: bold;">期望行业</label>
                                    </div>
                                </div>

                                <div style="margin-top: -20px;">
                                    <!--错误提示-->
                                    <span style="margin-left: 20px;font-size: 10px;font-weight:bold;color:red;" id="positionTypeSecond_msg"></span>
                                    <div class="form-floating mb-3">
                                        <select name="positionTypeSecondId" class="form-select" id="positionTypeSecond">
                                            <option value="0" selected disabled hidden>请先选择期望行业</option>

                                        </select>
                                        <label for="positionTypeSecond" style="font-weight: bold;">期望类型</label>
                                    </div>
                                </div>

                                <div style="margin-top: -20px;">
                                    <!--错误提示-->
                                    <span style="margin-left: 20px;font-size: 10px;font-weight:bold;color: red;" id="prov_msg"></span>
                                    <div class="form-floating mb-3">
                                        <select  class="form-select" id="prov">
                                            <option disabled selected hidden>请选择</option>
                                            <c:forEach items="${requestScope.provinces}" var="prov">
                                                <option value="${prov.provId}">${prov.provName}</option>
                                            </c:forEach>
                                        </select>
                                        <label for="prov" style="font-weight: bold;">期望省份</label>
                                    </div>
                                </div>

                                <div style="margin-top: -20px;">
                                    <!--错误提示-->
                                    <span style="margin-left: 20px;font-size: 10px;font-weight:bold;color: red;" id="city_msg"></span>
                                    <div class="form-floating mb-3">
                                        <select name="exceptedCityId" class="form-select" id="city">
                                            <option selected disabled hidden>请先选择省份</option>
                                        </select>
                                        <label for="city" style="font-weight: bold;">期望城市</label>
                                    </div>
                                </div>
                                <div style="margin-top: -20px;">
                                    <!--错误提示-->
                                    <span style="margin-left: 20px;font-size: 10px;font-weight:bold;color: red;" id="workNature_msg"></span>
                                    <div class="form-floating mb-3">
                                        <select name="workNature" class="form-select" id="workNature">
                                            <option disabled selected hidden>请选择</option>
                                            <option value="true">全职</option>
                                            <option value="false">兼职</option>
                                        </select>
                                        <label for="workNature" style="font-weight: bold;">工作性质</label>
                                    </div>
                                </div>
                                <div style="margin-top: -20px;">
                                    <!--错误提示-->
                                    <span style="margin-left: 20px;font-size: 10px;font-weight:bold;color: red;" id="salary_msg"></span>
                                    <div class="form-floating mb-3">
                                        <select name="exceptedSalaryId" class="form-select" id="salary">
                                            <option disabled selected hidden>请选择</option>
                                            <c:forEach items="${requestScope.salaries}" var="salary">
                                                <option value="${salary.id}">${salary.salaryInfo}</option>
                                            </c:forEach>
                                        </select>
                                        <label for="salary" style="font-weight: bold;">期望薪资范围</label>
                                    </div>
                                </div>

                                <input style="width: 285px;" type="submit" value="注册完成" class="btn rounded-pill pxp-sign-hero-form-cta" id="submitButton">
                                <div class="mt-4 text-center pxp-sign-hero-form-small" style="font-weight: bold;">
                                    已经有一个账号？<a href="/web/personal/signIn">登录</a>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<%--<!--foot-->--%>
<%--<jsp:include page="/web/personal/inc/personalSignUpFoot"/>--%>

<script src="/static/web/js/jquery-3.4.1.min.js"></script>
<script src="/static/web/js/bootstrap.bundle.min.js"></script>
<script src="/static/web/js/owl.carousel.min.js"></script>
<script src="/static/web/js/nav.js"></script>
<script src="/static/web/js/main.js"></script>
</body>
</html>

<script>
    $(function (){
       $("#prov").change(changeCity);
       $("#positionType").change(changePositionTypeSecondOri);
       $("#myform").submit(function (){
            return checkPositionType()&&checkPositionTypeSecond()&&checkProv()&&checkCity()&&checkSalary()&&checkWorkNature();
       });
    });
    function checkPositionType()
    {
        let positionTypeId = $("#positionType").val();
        if (positionTypeId==null)
        {
            $("#positionType_msg").html("请选择期望行业");
            $("#positionType").focus();
            return false;
        }
        $("#positionType_msg").html("");
        return true;
    }
    function checkPositionTypeSecond()
    {
        let positionTypeSecondId = $("#positionTypeSecond").val();
        if (positionTypeSecondId==null)
        {
            $("#positionTypeSecond_msg").html("请选择期望类型");
            $("#positionTypeSecond").focus();
            return false;
        }
        $("#positionTypeSecond_msg").html("");
        return true;
    }
    function checkProv()
    {
        let provId = $("#prov").val();
        if (provId==null)
        {
            $("#prov_msg").html("请选择期望省份");
            $("#prov").focus();
            return false;
        }
        $("#prov_msg").html("");
        return true;
    }
    function checkCity()
    {
        let cityId = $("#city").val();
        if (cityId==null)
        {
            $("#city_msg").html("请选择期望城市");
            $("#city").focus();
            return false;
        }
        $("#city_msg").html("");
        return true;
    }
    function checkSalary()
    {
        let salaryId = $("#salary").val();
        if (salaryId==null)
        {
            $("#salary_msg").html("请选择期望薪资范围");
            $("#salary").focus();
            return false;
        }
        $("#salary_msg").html("");
        return true;
    }
    function checkWorkNature()
    {
        let workNature = $("#workNature").val();
        if (workNature==null)
        {
            $("#workNature_msg").html("请选择期望工作性质");
            $("#workNature").focus();
            return false;
        }
        $("#workNature_msg").html("");
        return true;
    }

    function changeCity()
    {
        let provId = $("#prov").val();
        $.ajax({
            url:"/web/personal/changeCity",
            type: "post",
            async: false,
            data: {
                provId:provId
            },
            dataType: "json",
            success:function (mes){
                $("#city").html("");
                for (let i = 0; i < mes.length; i++) {
                    $("#city").append("<option value='"+mes[i].cityId+"'>"+mes[i].cityName+"</option>");
                }
            }
        });
    }

    function changePositionTypeSecondOri()
    {
        let positionTypeId = $("#positionType").val();
        $.ajax({
            url:"/web/personal/changePositionTypeSecond",
            type:"post",
            data:{
                positionTypeId:positionTypeId
            },
            dataType:"json",
            async:false,
            success:function (mes){
                $("#positionTypeSecond").html("");
                for (let i = 0; i < mes.length; i++) {
                    $("#positionTypeSecond").append("<option value='"+mes[i].id+"'>"+mes[i].typeName+"</option>");
                }
            }
        });
    }
</script>
